<template>
  <view class="tianyancha-score">
    <text class="score">{{ score || '暂无评分' }}</text>
    <button :disabled="!companyId" class="view-btn" type="default" size="mini" @click="handleView">
      查看工商信息
    </button>
  </view>
</template>

<script setup lang="ts">
  import { tianyanchaSelectScore } from '@/api';
  import { navigateTo } from '@/router';
  import { isNumber } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { ref, watch } from 'vue';
  import { useFormItem } from '../hooks/useContext';

  const score = ref<number>();
  const companyId = ref<number>();

  const props = defineProps({
    modelValue: propTypes.number,
  });

  const { getProps } = useFormItem(props);

  watch(() => getProps.value.modelValue, getScore, {
    immediate: true,
  });

  function getScore(id?: number) {
    if (id) {
      companyId.value = id;
      tianyanchaSelectScore(id).then((r) => {
        score.value = r.percentileScore;
      });
    }
  }

  function handleView() {
    companyId.value &&
      navigateTo({
        name: 'businessInfo',
        options: {
          id: companyId.value,
        },
      });
  }
</script>

<style lang="scss" scoped>
  .tianyancha-score {
    display: flex;
    align-items: center;
    height: 100%;
    .score {
      font-size: 27rpx;
      color: #bc792b;
      flex: 1;
      text-align: center;
    }
    .view-btn {
      margin: 0;
    }
  }
</style>
